<!-- LoginFormtwo.vue -->
<template>
    <div class="login-container">
        <!-- 新增的图片和文本区域 -->
        <div class="logo-and-text">
            <img src="https://codelover.club/static/img/headLogo.d458f61f.png" alt="Logo" class="logo" />
            <p class="text-below-logo">程 / 序 / 员 / 的 / 梦 / 工 / 厂</p>
        </div>
        <common-list>
            <div class="list">
                <div class="login">
                    <router-link to="/LoginForm" class="tab-link" active-class="active">账号登录</router-link>
                    <router-link to="/LoginFormtwo" class="tab-link" active-class="active">验证码登录</router-link>
                </div>
                <input type="text" v-model="credentials.username" placeholder="请输入邮箱" />
                <input type="password" v-model="credentials.password" placeholder="请输入验证码" />
                <div class="login-options">
                    <label>
                        <input type="checkbox" v-model="autoLogin" /> 7天内自动登录
                    </label>
                    
                </div>
             <router-link to="/">
                <button @click="login">登录</button>
             </router-link>

                <!-- 新增的右侧内容 -->
            </div>
            <!-- 新增的右侧内容 -->
            <div class="separator">
                <div class="line-vertical">
                    <p>还没有账号:
                        <a href="#/RegistrationForm">立即注册</a>
                    </p>
                </div>
                <div class="privacy-policy">
                    <p @click="showModal">登录即同意
                    <a href="#" @click.prevent="showModal">《隐私政策》</a></p>
                </div>
                <!-- 模态框结构 -->
                <div v-if="isModalVisible" class="modal">
                    <div class="modal-content">
                        <span class="close" @click="hideModal">&times;</span>
                        <p>{{ privacyPolicyContent }}</p>
                    </div>
                </div>
            </div>

     
        </common-list>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import CommonList from './CommonList.vue'; // 引入common-list组件

const credentials = ref({
    username: '',
    password: '',
});

const autoLogin = ref(false);
const router = useRouter();

const login = async () => {
    try {
        const response = await axios.post('/api/login', credentials.value);
        // 登录成功，跳转到home页面
        router.push('/home');
    } catch (error) {
        console.error('登录失败:', error);
        // 处理登录失败的情况
    }
};

const forgotPassword = () => {
    // 实现忘记密码的逻辑
};

// 控制模态框显示的状态
const isModalVisible = ref(false);

// 隐私政策的内容（示例文本）
const privacyPolicyContent = "《隐私政策》在线学院网站codelover.club(以下简称“在线学院”)尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，在线学院会按照本隐私权政策的规定使用和披露您的个人信息。但在线学院将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，在线学院不会将这些信息对外披露或向第三方提供。在线学院会不时更新本隐私权政策。 您在同意在线学院服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于在线学院服务使用协议不可分割的一部分。";

// 显示模态框
const showModal = () => {
    isModalVisible.value = true;
};

// 隐藏模态框
const hideModal = () => {
    isModalVisible.value = false;
};
</script>

<style scoped>
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.logo-and-text {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: flex-start;
    /* 水平方向从左侧开始 */
    margin-bottom: 20px;
    /* 根据需要调整 */
    text-align: left;
    /* 确保文本也是左对齐的（尽管这是默认行为） */
}

.text-below-logo {
    font-size: 18px;
    /* 根据需要调整 */
    color: #ffffff;
    /* 根据需要调整 */
    font-weight: bold;
    font-size: 20px;
    margin-top: 30px;
    /* 根据需要添加一些上边距，使文本与图片之间有一些间距 */
}

.logo {
    width: 100px;
    /* 根据需要调整 */
    height: auto;
    /* 确保图片没有额外的右侧边距 */
    margin-right: 0;
    /* 通常这不是问题，除非有其他样式覆盖了它 */
    /* 如果你需要确保图片与文本之间有间距，可以在这里添加 margin-bottom */
}


.login-container {
    display: flex;
    flex-direction: column;
    /* 垂直排列子元素 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    width: 100%;
    max-width: 100%;
    /* 不超过屏幕宽度 */
    min-height: 100vh;
    /* 至少为视口高度 */
    padding: 20px;
    /* 避免内容接触屏幕边缘 */
    box-sizing: border-box;
    /* 使宽度和高度包括内边距和边框 */
    background-image: linear-gradient(to bottom, #3a74b7 50%, transparent 50%);
    overflow: hidden;
    /* 防止内容溢出 */
}

.login .tab-link {
    color: #35495e;
    margin: 0 10px;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
}

.login .tab-link.active {
    color: #0b3570bd;
    text-decoration: underline;
}

.login {
    margin: 10px 0;
    text-align: center;
}

.login-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    align-items: center;
}

.login-options label {
    display: flex;
    align-items: center;
    margin-right: 10px;
    white-space: nowrap;
}

.login-options a {
    color: #007bff;
    text-decoration: none;
    flex-grow: 1;
    margin-left: auto;
    text-align: right;
}


.login-options input[type="checkbox"] {
    margin: 5px;
    align-items: center;
}

.login-options a:hover {
    text-decoration: underline;
}

button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 20px;
    background-color: #4c88cc;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.common-list {
    display: flex;
    flex-direction: column;
    /* 改为垂直排列 */
    width: 100%;
    height: 100%;
    max-width: 300px;
    /* 最大宽度限制 */
    max-height: 400px;
    padding: 2vw;
    /* 使用视口宽度的百分比 */
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* overflow: auto; */
}

.list {
    margin-bottom: 2vw;
    /* 下边距 */

}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: rgb(241, 237, 237);
}

.common-list input[type="text"]:focus,
.common-list input[type="password"]:focus {
    background-color: #f5f6e3;
    outline: none;
    box-shadow: none;
}



a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


.separator {
    margin-top: 2vw;
    /* 上边距 */
    /* 其他样式 */
    display: flex;
    /* 设置为Flex容器 */
    flex-direction: column;
    /* 子元素垂直排列 */
    justify-content: center;
    flex: 1;
    margin-top: 1em;
}

.privacy-policy {
  margin-top: -1vh;
  /* 根据需要调整上边距，或者使用其他方式控制间距 */
  text-align: center;
  /* 使文本水平居中 */
}

.line-vertical p {
  margin-top: -2vh;
  text-align: center;
}
.privacy-policy p{
    margin-top: 15px;
    text-align: center;
}
.line-vertical p::before {
    content: '';
    display: block;
    border-top: 0.2em dashed #ddd;
    /* 虚线边框样式 */
    margin-bottom: 2em;
    /* 与文本的距离 */
}


/* 响应式设计：适配小屏幕 */
@media (max-width: 768px) {
    .common-list {
        padding: 5vw;
        /* 在小屏幕上增加内边距 */
    }
}

@media (max-width: 480px) {
    .common-list {
        padding: 10vw;
        /* 在非常小的屏幕上进一步调整内边距 */
    }
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 黑色背景，半透明 */
  overflow-y: auto; 
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>